<script language="javascript">
	$(document).ready(function(){
		$("#color_a").colorpicker({
			fillcolor:true,
			target:$("#color_a"),
			success:function(o,color){
				 $('#stylevalue').val(color)   ;
			}
		});
		$("#bgcolor_a").colorpicker({
			fillcolor:true,
			target:$("#bgcolor_a"),
			success:function(o,color){
				$('#stylevalue').val(color)   ;
			}
		});
		$('#colorpanel table').css("border","0px");
		$('#DisColor').css("height","10px");
		$('#HexColor').css("height","10px"); 
		$('#img_icon img').bind("click",function(){
			$('#demo_img').attr('src',$(this).attr("src")) ;
			$('#img_icon img').removeClass("selected");
			$(this).addClass("selected");
		});
		$('.indicator-placement-button').bind("click",function(){
			$('.indicator-placement-button').removeClass("selected");
			$(this).addClass("selected");
		});
	});
	function setStyleValue(obj){
		$('.warningitem').hide();$('#'+$(obj).val()).show();
		if($(obj).val() == "color" || $(obj).val() == "backgroundcolor"){
			$('#DisColor').show();
		}else{
			$('#DisColor').hide();
		}
	}
	function showFilterMenu(obj) {
		var cityOffset = $('#namediv').position();
		$("#icon_set").css({left:cityOffset.left+35+"px", top:(cityOffset.top+60)+"px"}).css("width",360).show();
		$("body").unbind("click", onBodyDownFilter);
		$("body").bind("click", onBodyDownFilter);
	}
	function hideFilterMenu() {
		$(".menuContent").hide();
		$("body").unbind("click", onBodyDownFilter);
	}
	function onBodyDownFilter(event) {
		if($(event.target).parents('.menuContent').length > 0 ){
		
		}else{
			hideFilterMenu();
		}
	}
</script>
<div class="artCon">
	<div class="middleArt" style="width:750px;">
	<form class="form-horizontal" id="useraddForm" action="/${orgi}/design/custom/warningaddo/${reportid!''}/${modelid}.html" data-target=".d-content" data-toggle="ajax-noclose-form" data-width="750" method="post">
		<input value="${name!''}" name="dataname" type="hidden">
		<input value="select" name="valuetype" id="valuetype" type="hidden">
		<input value="" name="stylevalue" id="stylevalue" type="hidden">
		<div class="artMain artOther" style="min-height:180px;">
			<div class="leftList" style="height: 180px;width:150px;overflow-y:auto;overflow-x:hidden;">
				<ul>
					<#if warningList?? && warningList?size gt 0>
					<#list warningList as warning>
					<li class="cur" style="padding:3px;text-align:left;font-size:12px;width:144px;overflow:hidden;white-space:nowrap;">
						<a href="/rivues/design/custom/warningdel/${reportid!''}/${modelid}/${warning.id!''}.html" data-toggle="load" data-target=".d-content"				
						   style="margin-left:5px;display:inline-flex;line-height:14px;">
							<img src="/assets/images/deletered.png" height="12" width="12">
						</a>
						<a href="#" title="${warning.name!''}" style="display:inline-flex;line-height:14px;">
							<img src="/assets/images/top_icon122.png" style="height:12px;">
							&nbsp;${warning.name!''}
						</a>
						
					</li>
					</#list>
					<#else>
					<li style="height:240px;font-style:italic;padding-top:10px;color:#4095d4;">
						未设置预警项
					</li>
					</#if>
				</ul>
			</div>
			<div class="rightCon" style="width:592px !important;padding-left:5px;">
				<table class="data_table_1">
					<tbody>
						<tr>
							<th>预警项标题：</th>
							<td colspan="3">
								<input type="text" class="span2" value="${name!''}" name="name">
							</td>
						</tr>
						<tr>
							<th style="text-align:right;">如果：</th>
							<td style="width:170px;">
								<select class="span2" name="measure">
									<#if reportModel?? && reportModel.measure??>
									<#list reportModel.measure?split(",") as measure>
									<#if cube??>
									<#list cube.measure as mea>
									<#if mea.id == measure>
									<option value="text" <#if name?? && name == mea.name>selected="selected"</#if>>${mea.name!''}</option>
									</#if>
									</#list>
									</#if>
									
									</#list>
									</#if>
								</select>
							</td>
							<th>
								<select class="span1" name="condition" style="width:50px;">
									<option value="=" selected="selected">==</option>
									<option value="!=">!=</option>
									<option value="<">&lt;</option>
									<option value="<=">&lt;=</option>
									<option value=">">&gt;</option>
									<option value=">=">&gt;=</option>
									<!--
									<option value="auto">包含</option>
									<option value="auto">不包含</option>
									-->
								</select>
							</th>
							<td>
								<div id="selectdiv">
									<select class="span2" name="comparemeasure" style="width:200px;">
										<#if reportModel?? && reportModel.measure??>
										<#list reportModel.measure?split(",") as measure>
										<#if cube??>
										<#list cube.measure as mea>
										<#if mea.id == measure>
										<option value="text">${mea.name!''}</option>
										</#if>
										</#list>
										</#if>
										
										</#list>
										</#if>
									</select>
								</div>
								<div id="inputdiv" style="display:none;padding-left:2px;">
									<input type="text" name="comparevalue" value="0" style="width:190px;">
								</div>
								
							</td>
							<th><div title="设置指标比较类型（指标值等于其他字段/指标值等于设定值）" class="cr-target-toggle" onclick="if($(this).hasClass('cr-target-toggle-text')){$('#valuetype').val('select');$('#selectdiv').show();$('#inputdiv').hide();$(this).removeClass('cr-target-toggle-text');}else{$('#valuetype').val('input');$('#selectdiv').hide();$('#inputdiv').show();$(this).addClass('cr-target-toggle-text');}"></div></th>
						</tr>
						<tr>
							<th style="text-align:right;">那么：</th>
							<td style="padding-left:2px;">
								<input type="text" value="${name!''}" disabled="true" style="width:155px;" id="namediv">
							</td>
							<th style="text-align:right;">显示为：</th>
							<td colspan="3">
								<select class="span1" name="convalue" style="width:200px;" onchange="setStyleValue(this)">
									<option value="color">字体颜色</option>
									<option value="class">显示图标</option>
									<option value="backgroundcolor">改变背景颜色</option>
									<option value="fontstyle">改变字体样式</option>
									<option value="text">替换为文本</option>
								</select>
							</td>
						</tr>
						<tr>
							<th></th>
							<td colspan="3" style="">
								<input type="text" id="DisColor" size="5" disabled="" style="border: 1px solid rgb(0, 0, 0); background-color: rgb(153, 102, 51); height: 10px; background-position: initial initial; background-repeat: initial initial;">
								<span id="color" class="warningitem">
									<a href="javascript:void(0)" id="color_a">选择文字颜色</a>
								</span>
								<span id="class" class="warningitem" style="display:none;">
									<img src="/assets/images/resources/ind-circle-green.png" id="demo_img" height="26" width="26" style="vertical-align: middle; padding: 0px 2px 0px 3px;background-color:#FFFFFF;">
									<a href="javascript:showFilterMenu(this)">选择图标</a>
								    <div id="icon_set" class="menuContent" style="position: absolute;display:none;border: 1px solid #09f;background-color:#f2f2f2;">
										 <div style="width: auto;margin: 10px 22px 22px 20px;line-height: 1.4em;">
											<h2 style="margin-bottom:10px;font-size: 1.7em;	margin-right: 6px;padding-left:0px;">
												点击选中图标
											</h2>
											<div style="width: 360px;" id="img_icon">
												<div class="iconlist">
													<img src="/assets/images/resources/ind-triangle-up-red.png" data-image="ind-triangle-up-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-triangle-up-yellow.png" data-image="ind-triangle-up-yellow" class="indicator-swatch"/>
													<img src="/assets/images/resources/ind-triangle-up-green.png" data-image="ind-triangle-up-green" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-up-grey.png" data-image="ind-triangle-up-grey" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-even-red.png" data-image="ind-even-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-even-yellow.png" data-image="ind-even-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-even-green.png" data-image="ind-even-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-even-grey.png" data-image="ind-even-grey" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-triangle-down-red.png" data-image="ind-triangle-down-red" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-down-yellow.png" data-image="ind-triangle-down-yellow" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-down-green.png" data-image="ind-triangle-down-green" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-down-grey.png" data-image="ind-triangle-down-grey" class="indicator-swatch"  />
												</div>
												<div class="iconlist">
													<img src="/assets/images/resources/ind-x-red.png" data-image="ind-x-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-x-yellow.png" data-image="ind-x-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-x-green.png" data-image="ind-x-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-x-grey.png" data-image="ind-x-grey" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-check-red.png" data-image="ind-check-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-check-yellow.png" data-image="ind-check-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-check-green.png" data-image="ind-check-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-check-grey.png" data-image="ind-check-grey" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-star-red.png" data-image="ind-star-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-star-yellow.png" data-image="ind-star-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-star-green.png" data-image="ind-star-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-star-grey.png" data-image="ind-star-grey" class="indicator-swatch" />
												</div>
												<div class="iconlist">
													<img src="/assets/images/resources/ind-circle-red.png" data-image="ind-circle-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-circle-yellow.png" data-image="ind-circle-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-circle-green.png" data-image="ind-circle-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-circle-grey.png" data-image="ind-circle-grey" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-diamond-red.png" data-image="ind-diamond-red" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-diamond-yellow.png" data-image="ind-diamond-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-diamond-green.png" data-image="ind-diamond-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-diamond-grey.png" data-image="ind-diamond-grey" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-square-red.png" data-image="ind-square-red" class="indicator-swatch selected"  />
													<img src="/assets/images/resources/ind-square-yellow.png" data-image="ind-square-yellow" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-square-green.png" data-image="ind-square-green" class="indicator-swatch" />
													<img src="/assets/images/resources/ind-square-grey.png" data-image="ind-square-grey" class="indicator-swatch" />
												</div>
												<div class="iconlist">
													<img src="/assets/images/resources/ind-circle-warning-red.png" data-image="ind-circle-warning-red" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-circle-warning-yellow.png" data-image="ind-circle-warning-yellow" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-circle-warning-green.png" data-image="ind-circle-warning-green" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-circle-warning-grey.png" data-image="ind-circle-warning-grey" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-warning-red.png" data-image="ind-triangle-warning-red" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-warning-yellow.png" data-image="ind-triangle-warning-yellow" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-warning-green.png" data-image="ind-triangle-warning-green" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-triangle-warning-grey.png" data-image="ind-triangle-warning-grey" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-square-warning-red.png" data-image="ind-square-warning-red" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-square-warning-yellow.png" data-image="ind-square-warning-yellow" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-square-warning-green.png" data-image="ind-square-warning-green" class="indicator-swatch"  />
													<img src="/assets/images/resources/ind-square-warning-grey.png" data-image="ind-square-warning-grey" class="indicator-swatch"  />
												</div>												
											</div>
											<div style="width: 360px;margin-top:20px;">
												<div style="float:left;line-height:40px;">图标位置：</div>
												<div data-placement="left" class="indicator-placement-button selected" style="border-right:none;float:left;">
													<img src="/assets/images/placement-icon.png" style="width:13px;height:13px;padding:0px;margin: 0px 1px 1px 0px;" align="top"> 左侧
												</div>
												<div data-placement="replace" class="indicator-placement-button" style="border-right:none;float:left;">替换</div>
												<div data-placement="right" class="indicator-placement-button" style="float:left;">右侧
													<img src="/assets/images/placement-icon.png" style="width:13px;height:13px;padding:0px;margin: 0px 1px 1px 0px;" align="top">
												</div>
											</div>
										</div>
									</div>
								</span>
								<span id="backgroundcolor" class="warningitem" style="display:none;">
									<a href="javascript:void(0)" id="bgcolor_a">选择单元格背景颜色</a>
								</span>
								<span id="fontstyle" class="warningitem" style="display:none;">
									<select class="cr-property-input" onchange="$('#stylevalue').val($(this).val())">
										<option value="bold">粗体</option>
										<option value="italic">斜体</option>
										<option value="underline">下划线</option>
									</select>  
									<a href="javascript:void(0)"> * 选择符合条件的字体样式</a>
								</span>
								<span id="text" class="warningitem" style="display:none;">
									<input type="text" class="span2" value="" onkeyup="$('#stylevalue').val($(this).val())">
									<a href="javascript:void(0)" style="line-height:25px;"> * 输入符合条件是显示的文本</a>
								</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="bottomBg">
			<div class="btnWrap">
				<input type="submit" class="subButtonStyle" value="确认"/>
				<a href="javascript:closeR3ArtDialog()" class="btnStyle2">关闭</a>
			</div>
		</div>
		</form>
	</div>
</div>
